<template>
  <div id="editor" />
</template>

<script>

import 'codemirror/lib/codemirror.css' // Editor's Dependency Style
import '@toast-ui/editor/dist/toastui-editor.css' // Editor's Style

import Viewer from '@toast-ui/editor/dist/toastui-editor-viewer';

export default {
  name: 'MarkdownSee',
  props: {
    msg: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      editor: {}
    }
  },
  watch: {
    msg() {
      this.editor.getMarkdown(this.msg)
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.editor = new Viewer({
        el: document.querySelector('#editor'),
        height: 'auto',
        initialValue: this.msg
      })
    }
  }
}
</script>

<style scoped>

</style>
